<template>
  <div>
    <common-table :tableData="tableData" :tableColumn="tableColumn" :header-row-style="{backgroundColor: '#f7fbff'}">
      <template #tag="scope">
        <el-tag @click="handle(scope)">
          {{ scope.row.code }}
        </el-tag>
      </template>
      <template #action>
        <el-button type="primary" size="default" @click="">删除</el-button>
      </template>
    </common-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { getTestData } from '@/http/api/user/testPage';

const tableData = reactive([
    {
        id: "1",
        name: "管理员",
        code: "admin",
        dataPer: "0",
        createBy: null,
        createDate: "2024-08-26 16:17:11",
        updateBy: null,
        updateDate: "2024-08-30 16:47:19",
        delFlag: 0,
        remark: null
    },
    {
        id: "1828984778168475649",
        name: "法师",
        code: "bb",
        dataPer: "0",
        createBy: "1827954444719185921",
        createDate: "2024-08-29 10:35:27",
        updateBy: null,
        updateDate: "2024-09-03 11:18:05",
        delFlag: 0,
        remark: null
    },
    {
        id: "1828992017952481281",
        name: "鼓励师",
        code: "111",
        dataPer: "1",
        createBy: "1828675150310301697",
        createDate: "2024-08-29 11:04:13",
        updateBy: null,
        updateDate: "2024-09-03 10:33:11",
        delFlag: 0,
        remark: null
    },
    {
        id: "1829027339767697410",
        name: "战士",
        code: "cc",
        dataPer: "1",
        createBy: "1828675150310301697",
        createDate: "2024-08-29 13:24:34",
        updateBy: null,
        updateDate: "2024-09-03 10:33:11",
        delFlag: 0,
        remark: null
    },
    {
        id: "1829029360595947522",
        name: "测试角色",
        code: "A_b",
        dataPer: "1",
        createBy: "1827954444719185921",
        createDate: "2024-08-29 13:32:36",
        updateBy: null,
        updateDate: "2024-09-03 10:33:00",
        delFlag: 0,
        remark: null
    }
])

const tableColumn = reactive([
  {label: 'id', prop: 'id', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: 'name', prop: 'name', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: 'code', prop: 'code', type: 'default', width: '200px', align: 'start', template: 'tag'},
  {label: 'dataPer', prop: 'dataPer', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: 'createBy', prop: 'createBy', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: 'createDate', prop: 'createDate', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: 'updateBy', prop: 'updateBy', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: 'updateDate', prop: 'updateDate', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: 'delFlag', prop: 'delFlag', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: 'remark', prop: 'remark', type: 'default', width: '200px', align: 'start', template: 'text'},
  {label: '操作', prop: 'action', type: 'default', width: '100px', align: 'start', template: 'action', fixed: 'right'},
])

const getData = async () => {
  const result = await getTestData()
  console.log('result', result)
}

const handle = (data: string) => {
    console.log('data', data)
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>

</style>